import type { Metadata } from "next"
import ImagePath from "@/app/assets/images/businessBgi.jpg"
import WebSiteNav from "../components/WebSiteNav"
import DashBoardBanner from "./Banner"
import Image from 'next/image'
import Link from "next/link"
import JJImage from '@/app/assets/images/jiangjin.jpg'
import DZImage from '@/app/assets/images/dangzhou.png'
import QJImage from '@/app/assets/images/qiangjiang.jpg'
import SPImage from '@/app/assets/images/foods.jpg'
import AboutImage from '@/app/assets/images/about.jpg'
import { Button } from "react-bootstrap"
import News from "./News"
import WebSiteFooter from "../components/WebSiteFooter"

const customerList = [
  {
    url: JJImage,
    alt: '重庆市江津区生态环境监测站',
    title: '重庆市江津区生态环境监测站',
    info: '号外！号外！热烈祝贺重庆市江津区',
    jump: '/'
  },
  {
    url: DZImage,
    alt: '首厚LIMS在米舟联发检测正式上线啦！',
    title: '首厚LIMS在米舟联发检测正式上线啦！',
    info: '好消息好消息！什么好消息？首厚L',
    jump: '/'
  },
  {
    url: QJImage,
    alt: '重庆市黔江区疾病预防控制中心',
    title: '重庆市黔江区疾病预防控制中心',
    info: '今天呢，小编得知了一个天大的好消',
    jump: '/'
  },
  {
    url: SPImage,
    alt: '食品药品检验检测研究院',
    title: '食品药品检验检测研究院',
    info: '食品药品检验检测研究院',
    jump: '/'
  }
]

export const metadata: Metadata = {
  title: "重庆首厚智能科技研究院有限公司",
  description: "实验室信息管理,LIMS,实验室管理系统,LIMS实验室信息管理,实验室信息管理系统,LIMS,LIMS系统,17025,管理软件,实验室LIMS",
  keywords: "实验室信息管理,LIMS,实验室管理系统,LIMS实验室信息管理,实验室信息管理系统,LIMS,LIMS系统,17025,管理软件,实验室LIMS"
}

const DashBoard = () => {

  /** 渲染客户列表 */
  function renderCustomerItem(item: any, index: number) {
    const { url, alt, title, info, jump } = item;
    return (
      <li key={index} className="flex justify-center items-center">
        <Link href={jump}
          className="flex flex-col items-center justify-center transition ease-in-out delay-150 w-[240px] hover:-translate-y-2">
          <Image src={url} alt={alt} />
          <div>
            <span className="mt-1 block text-dark text-ellipsis w-[240px] overflow-hidden whitespace-nowrap">{title}</span>
            <p className="block text-gray-400 text-ellipsis w-[240px] overflow-hidden whitespace-nowrap text-xs mt-1">{info}</p>
          </div>
        </Link>
      </li>
    )
  }

  return (
    <div className="h-full w-full">
      <WebSiteNav />
      <div className="min-w-[1024px]">
        <DashBoardBanner />
        <div className="flex items-center justify-center w-full">
          <div className="bg-center bg-no-repeat bg-cover h-[719px] max-w-screen-xl w-full"
            style={{ backgroundImage: `url(${ImagePath.src})` }}></div>
        </div>
        <div className="bg-slate-200 flex justify-center">
          <div className="max-w-screen-xl flex flex-col">
            <div className="w-[1200px] flex flex-col items-center h-[178px] justify-center">
              <h4>我们的客户</h4>
              <p>OUR CUSTOMERS</p>
            </div>
            <div>
              <ul className="grid grid-cols-4 ">
                {
                  customerList.map((item, index) => renderCustomerItem(item, index))
                }
              </ul>
              <div className="h-[200px] flex justify-center items-center">
                <Button variant="light">查看更多案例</Button>
              </div>
            </div>
          </div>
        </div>
        <News />
        <div className="flex justify-center">
          <div className="h-[420px] bg-center bg-no-repeat bg-cover max-w-screen-xl w-full relative flex items-center justify-center" 
          style={{ backgroundImage: `url(${AboutImage.src})` }}>
            <div className="text-sm w-[460px] mt-10">
              <p className="mb-0">
              重庆首厚智能科技研究院有限公司（以下简称“首厚智能”）是一家专注于数字化产品自主研发、集成、销售、服务为一体的高新技术企业。公司总部设在重庆，在全国拥有6个营销中心、5个交付中心，主要覆盖西南、西北及华中地区。
              </p>
              <p>
              2014年起，首厚智能围绕实验室进行LIMS（实验室信息化管理系统）产品研发、智能实验室解决方案提供以及分析检测行业的精耕。首厚智能在落地智能实验室整体方案的同时，与国内外知名企业建立了长期的合作关系，共同推进行业数字化发展。2021年，重庆重交再生资源开发股份有限公司（以下简称“重庆重交”）和首厚智能公司正式签订了股权
              </p>
            </div>
          </div>
        </div>
        <div className="flex justify-center">
          <div className="max-w-screen-xl w-full bg-gray-100 flex flex-col">
            <div className="h-[178px] flex flex-col items-center justify-center">
              <h4>联系我们</h4>
              <p>Contact us</p>
            </div>
            <div>
              <div className="grid grid-cols-4 h-[180px]">
                <div className="flex flex-col items-center">
                  <i className="iconfont icon-31dianhua text-gray-400" style={{fontSize: '60px'}} />
                  <div className="text-[14px] mt-2">
                    <a href="" className="text-gray-600 hover:text-red-400">咨询热线：023-6751 3560</a>
                  </div>
                </div>
                <div className="flex flex-col items-center">
                  <i className="iconfont icon-duanxin text-gray-400" style={{fontSize: '60px'}} />
                  <div className="text-[14px] mt-2">
                    <a href="" className="text-gray-600 hover:text-red-400">企业邮箱：sh@shouhouzn.com </a>
                  </div>
                </div>
                <div className="flex flex-col items-center">
                  <i className="iconfont icon-dizhi text-gray-400" style={{fontSize: '60px'}} />
                  <div className="text-[14px] mt-2">
                    <a href="" className="text-gray-600 hover:text-red-400 w-[178px] block text-[12px]">重庆市两江新区峨眉大道北段99号同程配总部基地3层</a>
                  </div>
                </div>
                <div className="flex flex-col items-center">
                  <i className="iconfont icon-liuyanguanli text-gray-400" style={{fontSize: '60px'}} />
                  <div className="text-[14px] mt-2 ">
                    <a href="" className="text-gray-600 hover:text-red-400">在线留言</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <WebSiteFooter />
      </div>
    </div>
  )
}

export default DashBoard